<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container {
            width: 1200px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
        }

        .container::after {
            content: '';
            flex-grow: 999999;
        }

        .image-item {
            /* height: 200px; */
            margin: 5px;
            flex-grow: 1;
            background-color: brown;
            position: relative;
        }

        .image-item img {
            vertical-align: top;
            /* height: 100%; */
            max-width: 100%;
            /* object-fit: cover; */
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="container">

    </div>

    <script src="./utils/jquery-3.4.1.min.js"></script>
    <script src="./utils/mock-min.js"></script>
    <script src="./utils/server.js"></script>
    <script src="./utils/utils.js"></script>

    <script>
        // 功能一：将页面的静态图片全部替换成动态的数据
        let imagesData = {
            start: 0,    // 从第0张开始获取图片
            count: 20,   // 获取图片的张数
            rows: []     // 保存图片信息
        }
        // 1. 通过 ajax 获取数据库中的数据
        getImagesData();
        function getImagesData() {
            $.ajax({
                url: '/images/getImages',
                type: 'get',
                data: {
                    start: imagesData.start,
                    count: imagesData.count
                },
                dataType: 'json',
                success(msg) {
                    // console.log('请求结果', msg);
                    imagesData = msg;
                    render();
                }
            })
        }
        // 2. 将获取到的数据渲染到页面上
        function render() {
            imagesData.rows.forEach(item => {
                $('.container').append(`
                    <div class="image-item" style="width:${200 / item.height * item.width}px;flex-grow:${200 / item.height * item.width}">
                        <div style="padding-bottom:${item.height / item.width * 100}%;background: #ccc"></div>
                        <img data-src="${item.url}" alt="">
                    </div>
                `);
            });
            showImages();
        }

        


        // 功能二：滚动条触底后加载更多的图片
        $(window).scroll(function () {
            showImages();
            // 页面的高度
            const pageHeight = $(document).height();
            // 可视区高度
            const windowHeight = $(window).height();
            // 滚动条距离顶部的高度
            const scrollTop = $(window).scrollTop();
            if (pageHeight - windowHeight - scrollTop <= 200) {
                // 加载更多
                imagesData.start += imagesData.count;
                getImagesData();
            }
        })

        // 功能三：图片懒加载
        function showImages() {
            // 可视区高度
            const windowHeight = $(window).height();
            // 滚动条距离顶部的高度
            const scrollTop = $(window).scrollTop();
            $('.image-item img').each(function () {
                const imageTop = $(this).offset().top;
                if (imageTop - scrollTop < windowHeight) {
                    $(this).attr('src', $(this).data('src'));
                }
            })
        }
    </script>
</body>

</html>